import { View, Text } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import "./index.scss";
import { useMemo, useState } from "react";

import { FlightIndex } from "../flight/index/index";
import { NoExploit } from "@/components/NoExploit";

const DEFAUT_TAB_LIST = [
  {
    title: "机票",
    tab: "flight",
    index: 0,
  },
  {
    title: "火车票",
    tab: "train",
    index: 1,
  },
  {
    title: "酒店",
    tab: "hotel",
    index: 2,
  },
  {
    title: "汽车票",
    tab: "bus",
    index: 3,
  },
];

const TabContent: React.FC<{ tabIndex: number }> = (props) => {
  const MAP_TAB_COMPONENT = {
    flight: <FlightIndex />,
  };

  console.log("tabIndex: ", props.tabIndex);

  console.log(
    "MAP_TAB_COMPONENT[DEFAUT_TAB_LIST[props.tabIndex].tab]: ",
    MAP_TAB_COMPONENT[DEFAUT_TAB_LIST[props.tabIndex].tab]
  );

  return (
    MAP_TAB_COMPONENT[DEFAUT_TAB_LIST[props.tabIndex].tab] ?? <NoExploit />
  );
};

export default function Index() {
  useLoad(() => {
    console.log("Page loaded.");
  });

  const [tabIndex, setTabIndex] = useState(0);

  const innerStyle = useMemo(() => {
    return {
      width: `${100 / DEFAUT_TAB_LIST.length}%`,
      transform: `translateX(${tabIndex * 100}%)`,
      transition: "transform 0.3s ease-in-out",
    };
  }, [tabIndex]);

  return (
    <View className="index-container">
      <View className="top">
        <View className="index-tab">
          {DEFAUT_TAB_LIST.map((item) => (
            <View
              key={item.tab}
              className={`'index_tab_item' ${item.tab} ${
                tabIndex === item.index ? "current" : ""
              }`}
              onClick={() => setTabIndex(item.index)}
            >
              {item.title}
            </View>
          ))}
        </View>
        <View className="scrollbar" style={innerStyle}></View>
      </View>
      <View className="content">
        <TabContent tabIndex={tabIndex} />
      </View>
    </View>
  );
}
